<template>
  <div style="background-color:#99a9bf;height: 1000px;">
    <div style="width:500px; height: 800px; margin: auto; padding: 10px;">
      <div id="app"
        style="width:500px; height: 800px; margin: auto; background-color: white;; padding: 20px; border-radius: 10px;">
        <el-button type="" @click="showForm = 'interview'">面试登记</el-button>
        <el-button type="" @click="showForm = 'question'">我要问问题</el-button>
        <!-- 其他代码 -->
        <transition name="fade">
          <div v-if="showForm === 'interview'">
            <!-- 面试登记表单 -->
            <el-form ref="form" :model="form" :rules="rules" style="margin-top:30px;" label-width="80px">
              <el-form-item label="" prop="className">
                <el-select v-model="form.className" @change="classChange" placeholder="请选择班级" style="width: 300px;">
                  <el-option v-for="item in classOptions" :key="item.id" :label="item.className" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="student">
                <el-input v-model="form.student" placeholder="请输入学生" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="faceTime">
                <el-date-picker clearable v-model="form.faceTime" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择面试时间" style="width: 300px;"></el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="faceCount">
                <el-input v-model="form.faceCount" placeholder="请输入面试次数" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="companyName">
                <el-input v-model="form.companyName" placeholder="请输入公司名" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="faceAddress">
                <el-input v-model="form.faceAddress" placeholder="请输入面试地址" style="width: 300px;" />
              </el-form-item>

              <el-form-item label="" prop="personnelName">
                <el-input v-model="form.personnelName" placeholder="请输入人事名" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="personnelPhone">
                <el-input v-model="form.personnelPhone" placeholder="请输入人事电话" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注" style="width: 300px;" type="textarea" autosize />
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer" style="margin: auto; text-align: center;">
              <el-button type="primary" @click="submitForm" style="width: 300px;">提交面试登记</el-button>
            </div>
          </div>

          <div v-else-if="showForm === 'question'">
            <!-- 图片上传区域 -->
            <el-upload ref="upload" action="http://localhost/dev-api/employment/studentHelp/cos" :auto-upload="auto"
              :before-upload="beforeUpload" :on-change="handleChange" accept="image/jpeg,image/png,image/gif"
              style="display:inline-block;margin-left:300px;">
              <el-button slot="trigger" size="small" type="primary">上传图片</el-button>
            </el-upload>
            <!-- 提问表单内容 -->
            <!-- 问问题单 -->
            <el-form ref="form" :model="StundetHelpform" :rules="rules" style="margin-top:30px;" label-width="80px">
              <el-form-item label="" prop="studentName">
                <el-input v-model="StundetHelpform.studentName" placeholder="请输入真实的姓名" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="email">
                <el-input v-model="StundetHelpform.email" placeholder="请输入正确的邮箱哟" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="wechat">
                <el-input v-model="StundetHelpform.wechat" placeholder="请填写正确的微信否则老师无法联系你" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="phone">
                <el-input v-model="StundetHelpform.phone" placeholder="请填写正确的电话否则老师无法联系你" style="width: 300px;" />
              </el-form-item>
              <el-form-item label="" prop="className">
                <el-select v-model="StundetHelpform.className" @change="changOne" placeholder="请选择班级名" style="width: 300px;">
                  <el-option v-for="item in classOptions" :key="item.id" :label="item.className" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
          
              <el-form-item label="" prop="creatTime" style="width: 300px;">
                <el-date-picker clearable v-model="StundetHelpform.creatTime" type="date" value-format="yyyy-MM-dd"
                  placeholder="请选择创建时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="" prop="issueType">
                <el-select v-model="StundetHelpform.issueType" placeholder="请选择问题类型" style="width: 300px;">
                  <el-option v-for="item in issueTypeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="teacherId">
                <el-select v-model="StundetHelpform.teacherName" @change="teacherChange" placeholder="请选择老师" style="width: 300px;">
                  <el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="remark">
                <el-input v-model="StundetHelpform.remark" placeholder="请输入备注" style="width: 300px;" type="textarea"
                  autosize />
              </el-form-item>
            </el-form>
            <!-- 这里替换为你要展示的问题表单 -->
            <div slot="footer" class="dialog-footer" style="margin: auto; text-align: center;">
              <el-button type="primary" @click="submitQuestionForm" style="width: 300px;">提交问题</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>

</template>

<script>
import { createLogger } from 'vuex';
import { addRegistration } from "@/api/employment/registration";
import { addStudentHelp } from "@/api/employment/studentHelp";
import { uploadCos } from "@/api/employment/studentHelp";
import { listClass } from "@/api/student/class";
import {listTeacher} from "@/api/teacher/teacher";
import {wechatPush} from "@/api/employment/studentHelp";





export default {
  name: "help",
  data() {
    return {
      //表单校验
      rules: {
        studentName: [
          { required: true, message: '请输入真实的姓名', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入正确的邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
        ],
        wechat: [
          { required: true, message: '请填写正确的微信', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请填写正确的电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' },
        ],
        className: [
          { required: true, message: '请选择班级名', trigger: 'change' },
        ],
        classId: [
          { required: true, message: '请输入班级id', trigger: 'blur' },
        ],
        creatTime: [
          { required: true, message: '请选择创建时间', trigger: 'change' },
        ],
        issueType: [
          { required: true, message: '请选择问题类型', trigger: 'change' },
        ],
        teacherId: [
          { required: true, message: '请选择老师', trigger: 'change' },
        ],
        remark: [
          { max: 200, message: '请输入备注', trigger: 'blur' },
        ],
      },
      showForm: 'interview', // 初始化显示面试登记表单
      form: {
        id: null,
        className: null,
        campus: null,
        student: null,
        faceTime: null,
        faceCount: null,
        companyName: null,
        faceAddress: null,
        remark: null,
        personnelName: null,
        personnelPhone: null,
        classId: null,
        type: null
      },
      StundetHelpform: {
        id: null,
        studentName: null,
        email: null,
        wechat: null,
        phone: null,
        className: null,
        classId: null,
        creatTime: null,
        issueType: null,
        teacherName: null,
        teacherId: null,
        status: 0,
        remark: null
      },
      issueTypeList: [
        { value: '类型A', label: '类型A' },
        { value: '类型B', label: '类型B' },
        { value: '类型C', label: '类型C' } // 添加更多问题类型...
      ],
      selectedFile: null,
      classOptions: {
        id: null,
        className: null,
        campus: null,
      },
      teacherList:{
        id:null,
        name:null,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        className: null,
        campus: null,
        status: null,
        charge: null,
        employmentTeacher: null,
        assistantTeacher: null,
      },
    }
  },
  methods: {
    //选择老师
    teacherChange(teacherValue){
      this.StundetHelpform.teacherName = teacherValue.name;
      this.StundetHelpform.teacherId = teacherValue.id;
    },


    //帮扶的时候选中班级之后绑定的字段
    changOne(Value){
      this.StundetHelpform.classId = Value.id;
      this.StundetHelpform.className = Value.className;
    },
    //获取选中的班级对象
    classChange(newValue) {
      this.form.classId = newValue.id;
      this.form.campus = newValue.campus;
      this.form.className = newValue.className;
    },
    // 将登记数据提交到后台
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 验证通过，执行提交操作
          addRegistration(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
          });
        } else {
          console.log('表单验证失败');
        }
      });
    },
    //将问题提交到后台
    submitQuestionForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 验证通过，执行提交操作
          addStudentHelp(this.StundetHelpform).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
          });
          //使用微信机器人推送消息到群中并且@对应的老师
          wechatPush(this.StundetHelpform).then(response=>{
            this.$modal.msgSuccess("推送成功");
            this.open = false;
          });

        } else {
          console.log('表单验证失败');
        }
      });
    },
    handleChange(file) {
      this.selectedFile = file.raw;
    },
    //上传图片到cos
    submitImage() {
      if (this.selectedFile) {
        const formData = new FormData();
        formData.append('file', this.selectedFile);
        // 使用axios或其他HTTP库发送POST请求
        uploadCos(formData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
        });

      } else {
        alert('请先选择图片');
      }
    },
    beforeUpload(file) {
      // 进行上传前的验证，如文件大小、格式等
      return true; // 返回true表示允许上传，false则阻止上传
    },
  },
  mounted() {
    // 页面加载完成后触发的方法
    listClass(this.queryParams).then(response => {
      this.classOptions = response.rows;
      console.log(this.classOptions);
      this.total = response.total;
      this.loading = false;
    });
    //查询所有的老师
    listTeacher(this.queryParams).then(response => {
        this.teacherList = response.rows;
        console.log(response.rows);
        this.total = response.total;
        this.loading = false;
      });
  },


}
</script>

<style scoped></style>
